<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mo.js的使用</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4728337_smprsu0of2s.css"
    />
    <!-- <script src="https://cdn.jsdelivr.net/npm/@mojs/core@1.7.1/dist/mo.umd.min.js"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/mo-js/1.7.1/mo.umd.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/mo-js/1.7.1/mo.umd.min.js"></script>
    <!-- <script src="./mo.umd.min.js"></script> -->
    <style>
      .like-button {
        cursor: pointer;
        font-size: 24px;
        color: #e74c3c;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <i class="iconfont icon-dianzan-xian"></i>
    </div>

    <div class="like-button" id="likeButton">👍</div>
    <script>
      function loadJS(url, callback) {
        // 避免重复加载
        let scriptArrys = $("script");
        if (scriptArrys && scriptArrys.length > 0) {
          for (let i = 0; i < scriptArrys.length; i++) {
            let item = scriptArrys[i];
            if (item.src && item.src.indexOf(url) != -1) {
              if (callback) {
                callback();
              }
              return;
            }
          }
        }

        var script = document.createElement("script");
        var fn = callback || function () {};
        script.type = "text/javascript";
        //IE
        if (script.readyState) {
          script.onreadystatechange = function () {
            if (
              script.readyState == "loaded" ||
              script.readyState == "complete"
            ) {
              script.onreadystatechange = null;
              fn();
            }
          };
        } else {
          //其他浏览器
          script.onload = function () {
            fn();
          };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }

      window.onload = function () {
        loadJS("./mo.umd.min.js", () => {
          console.log('chg');
          
          // 确保元素存在
          const boxElement = document.querySelector(".box");
          if (!boxElement) {
            console.error("没有找到目标元素 .box");
            return;
          }

          // 创建mojs的Burst动画
          const burst = new mojs.Burst({
            parent: boxElement, // 目标容器
            radius: { 0: 100 },
            count: 6,
            angle: 45,
            children: {
              shape: "circle",
              radius: 10,
              fill: "red",
              duration: 300,
            },
          });

          // 为likeButton按钮添加点击事件
          const likeButton = document.getElementById("likeButton");
          if (likeButton) {
            likeButton.addEventListener("click", function () {
              burst.replay(); // 点击按钮时播放动画
            });
          }
        });
      };
    </script>
  </body>
</html>

<script>
  window.onload = function () {
    /* const timeline = new mojs.Timeline();
    console.log(timeline);
    if (!timeline) return;
    const burst = new mojs.Burst({
      radius: { 50: 150 },
      count: 12,
      children: {
        shape: "circle",
        fill: ["white", "red", "green", "blue"],
        duration: 3000,
        easing: "quad.out",
      },
    });
    timeline.add(burst);
    document.querySelector(".box").addEventListener("click", function () {
      timeline.replay();
      console.log("点击");
    }); */
    /* document.addEventListener("DOMContentLoaded", function () {
      const likeButton = document.getElementById("likeButton");

      likeButton.addEventListener("click", function () {
        // 放大效果
        const scaleBurst = new mojs.Burst({
          parent: likeButton,
          radius: { 0: 50 },
          children: {
            shape: "circle",
            fill: "#e74c3c",
            scale: { 1: 2 },
            opacity: { 1: 0 },
            duration: 300,
            easing: "cubic.out",
          },
        });

        // 缩小效果
        const scaleDown = new mojs.Burst({
          parent: likeButton,
          radius: { 50: 0 },
          children: {
            shape: "circle",
            fill: "#e74c3c",
            scale: { 2: 1 },
            opacity: { 0: 1 },
            duration: 300,
            easing: "cubic.out",
          },
        });

        // 播放放大效果
        scaleBurst.play();

        // 延迟一定时间后播放缩小效果
        setTimeout(() => {
          scaleDown.replay();
        }, 300);
      });
    }); */
    /* const burst = new mojs.Burst();

    document.addEventListener("click", function (e) {
      burst.replay();
    }); */
  };
</script>
